import React, { useEffect, useState } from 'react';
import { Avatar, Image, Tooltip, Divider, Button, Select, Space } from 'antd';
import {
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  PropertySafetyOutlined,
  TransactionOutlined,
  UserAddOutlined,
  GithubFilled,
  AmazonCircleFilled,
  SkinFilled,
} from '@ant-design/icons';
import { setLocale, history } from 'umi';

const { Option } = Select;
import style from './index.less';
import Avatarlogo from '../../assets/aver.jpg';

// 卡片内容函数
const showNavigationDom = () => {
  return (
    <div className={style.navigationcard}>
      <div className={style.navigationuser}>
        <Avatar
          style={{ height: '44px', width: '44px' }}
          src={
            <Image src={Avatarlogo} style={{ width: '44px' }} preview={false} />
          }
        />
        <p className={style.navigationusername}>收银宝</p>
      </div>
      <div className={style.navigationtime}>
        <span>上次登陆时间: 2022-08-29 18:00:00</span>
        {/* <span>{t("login.Lastlogintime")}: 2022-08-29 18:00:00</span> */}
      </div>
      <div style={{ width: '232px' }}>
        <Divider style={{ margin: '0px' }} />
      </div>
      <div className={style.navigationselect}>
        <p>
          <span>
            <HomeOutlined />
          </span>
          <Button
            type="link"
            onClick={() => {
              history.push({
                pathname: '/welcome',
              });
            }}
          >
            首页
            {/* {t("layout.homePage")} */}
          </Button>
        </p>
        <p>
          <span>
            <UserOutlined />
          </span>
          <Button
            type="link"
            onClick={() => {
              history.push({
                pathname: '/customer-access/accountmine',
              });
            }}
          >
            我的账户
            {/* {t("layout.MyAccount")} */}
          </Button>
        </p>
        <p>
          <span>
            <PropertySafetyOutlined />
          </span>
          <Button
            type="link"
            onClick={() => {
              history.push({
                pathname: '/transaction-center/applicationresultquery',
              });
            }}
          >
            交易中心
            {/* {t("layout.TradingCenter")} */}
          </Button>
        </p>
        <p>
          <span>
            <TransactionOutlined />
          </span>
          <Button
            type="link"
            onClick={() => {
              history.push({
                pathname: '/global-payments/exchange',
              });
            }}
          >
            全球付款
            {/* {t("layout.GlobalPayment")} */}
          </Button>
        </p>
        <p>
          <span>
            <UserAddOutlined />
          </span>
          <Button
            type="link"
            onClick={() => {
              history.push({
                pathname: '/beneficiary/beneficiaryinformation',
              });
            }}
          >
            {/* {t("layout.Beneficiary")} */}
            受益人
          </Button>
        </p>
        <p>
          <span>
            <SettingOutlined />
          </span>
          <Button
            type="link"
            onClick={() => {
              history.push({
                pathname: '/set-up/accountpasswordset',
              });
            }}
          >
            我的设置
            {/* {t("layout.SetUp")} */}
          </Button>
        </p>
      </div>
      <div style={{ width: '232px' }}>
        <Divider style={{ margin: '0px' }} />
      </div>
      <div className={style.navigationbottom}>
        <Button
          type="link"
          onClick={() => {
            history.push({
              pathname: '/user',
            });
          }}
        >
          退出登录
          {/* {t("login.Logout")} */}
        </Button>
      </div>
    </div>
  );
};

const RightContent: React.FC = () => {
  const [languageText, setLanguageText] = useState('');
  const handleChange = (value: string) => {
    setLocale(value, false);
  };

  useEffect(() => {
    const data: string = localStorage.getItem('umi_locale') || 'zh-CN';
    setLanguageText(data);
  });

  return (
    <div className={style.navigationboss}>
      {document.body.clientWidth > 800 ? (
        <span style={{ marginRight: '20px', paddingTop: '6px' }}>
          <Select
            defaultValue={'zh-CN'}
            style={{ width: 100 }}
            onChange={handleChange}
          >
            <Option value="zh-CN">简体中文</Option>
            <Option value="zh-TW">繁体中文</Option>
            <Option value="en-US">English</Option>
          </Select>
        </span>
      ) : undefined}
      {/* <Space size="middle" style={{ paddingTop: '10px' }}>
        <AmazonCircleFilled
          key="AmazonCircleFilled"
          style={{
            color: 'var(--ant-primary-color)',
            fontSize: 20,
          }}
        />

        <SkinFilled
          key="SkinFilled"
          style={{
            color: 'var(--ant-primary-color)',
            fontSize: 20,
          }}
        />

        <GithubFilled
          key="GithubFilled"
          style={{
            color: 'var(--ant-primary-color)',
            fontSize: 20,
          }}
        />
      </Space> */}
      <Tooltip placement="bottomLeft" color="#fff" title={showNavigationDom()}>
        <Avatar
          style={{ height: '40px', width: '40px', marginLeft: '20px' }}
          src={
            <Image
              src={Avatarlogo}
              style={{ width: '40px', height: '40px' }}
              preview={false}
            />
          }
        />
      </Tooltip>
    </div>
  );
};

export default RightContent;
